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Decorator Pattern 


Introduction 


• How do we change the behaviour of an object (an 
instance) rather than a class? 

• How to change behaviour of a class at runtime? 

• How can we separate multiple responsibilities? 
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Decorator Pattern 


Example: Window 
Decorations 

• Imagine we have a window. It can have: 

- Titlebar 

- Menubar 

- Vertical Scrollbar 

- Horizontal Scrollbar 
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Decorator Pattern 


Example: Window 
Decorations 


• Should we implement 1 class which has all 4 
responsibilities? 

- What if we don’t want them all? 

- Should we couple a class with unrelated 
responsibility? 

- Should a window implement all of the widgets 
inside of it? 
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Decorator Pattern 


Example: Window 
Decorations 


• Should we implement 16 different combinations of 
windows? 

- TitleBarWindow 

- TitleBarMenubarWindow 

- TitleBarMenubarVerticalScrollbarWindow 

TitleBarMenubarVerticalScrollbarHorizontalScrollbarWindow 

• If we have these classes, we can’t change behaviour 
at runtime! 
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Decorator Pattern 


What is a potential 
solution? 


• The decorator pattern! 

- Let’s wrap our Window with decorators who fulfill 
these responsibilities 

- Each component can be responsible for drawing 
itself. 

- Separate responsibilities to responsible 
component. 

- Avoid combinatorial explosion of classes 
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AbstractComponent 


+operation() 


ConcreteComponent 


+operation() 


AbstractDecorator 


component 


+operation() 


ConcreteDecorator 


+operation() 


















Window 


+draw() 


MenuBarDecorator 


+draw() 


UIDecorator 


component 


+draw() 
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VerticalScrollBarDecorator 


+draw() 


HorizontalScrollBarDecorator 


+draw() 


TitleBarDecorator 


+draw() 
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Window Decorator Example 

UlComponent w, tb, mtb, hsbmtb; 
w = new WindowO; 

w.drawO; 

tb = new TitleBarDecorator( w ); 


Simple Window 


tb.drawO; 
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Window Decorator Example 

tb = new TitleBarDecorator( w ); 


tb.drawO; 



mtb = new MenuBarDecorator( tb ); 


mtb.drawO; 


□M Title Of Window 

File Edit Help 


Simple Window 
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Window Decorator Example 

mtb = new MenuBarDecorator( tb ); 


mtb.drawO; 



hsbmtb = new 

HorizontalScrollBarDecorator(mtb) 


hsbmtb. draw(); 



Horizontal ScrollbQ 
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Window Decorator Attributes 


hsbmtb = new 




Window Decorator Calls 


hsbmtb = new 

HorizontalScrollBarDecorator(mtb); 
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Decorator Pattern 


Window Decorator Code 


• Example Window Decorator Code 

- Note that the drawing routines are simulated 

- Also observe how draw () is implemented 
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Decorator Pattern 


WindowDecorator Driver, java 


interface UlComponent { 

public void draw(); 

} 


class Window implements UlComponent { 


} 


public void draw() { 

/* Draw Window */ 

System.err.println("XnDraw^Window"); 

} 


abstract class UIDecorator implements 

UlComponent { 

UlComponent component; 

} 


class TitleBarDecorator extends UIDecorator 


{ 

TitleBarDecorator(UlComponent c) { 
component = c; 

} 
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Decorator Pattern 


public void draw() { 

component.draw(); 

/* draw title bar here */ 

System.err.println("Draw^TitleBar"); 

} 

} 

class MenuBarDecorator extends UIDecorator { 

MenuBarDecorator(UlComponent c) { 
component = c; } 

public void draw() { 

component.draw(); 

/* draw menu bar here */ 

System.err.println("Draw^MenuBar"); 

} 

} 
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Decorator Pattern 

class HorizontalScrollBarDecorator extends 
UIDecorator { 

HorizontalScrollBarDecorator(UIComponent 
c) { 

component = c; 

} 

public void draw() { 

component.draw(); 

/* draw HScroll bar here */ 

System.err.println("Draw^Horizontal^ 
Scroll^Bar"); 

} 

} 
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Decorator Pattern 


public class WindowDecoratorDriver { 

public static void main(String [] argv) 

{ 


UlComponent w, tb, mtb, hsbmtb; 
w = new Window (); 
w.draw(); 

tb = new TitleBarDecorator( w ); 
tb.draw(); 

mtb = new MenuBarDecorator( tb ); 
mtb.draw(); 
hsbmtb = new 

HorizontalScrollBarDecorator( 
mtb ) ; 

hsbmtb.draw(); 


} 
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Decorator Pattern 


WindowDecoratorDriver.java.txt 


Draw 

Window 

Draw 

Window 

Draw 

TitleBar 

Draw 

Window 

Draw 

TitleBar 

Draw 

MenuBar 

Draw 

Window 

Draw 

TitleBar 

Draw 

MenuBar 

Draw 

Horizontal Scroll Bar 
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Stacked Coins Example 




300 cents 



How do we represent these coins stacks? 
class PennyLoonie? class DimeDimePennyPenny? 
class LoonieLoonieLoonie? 




























Stacked Coins Example 



0 cents 
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Stacked Coins Example 

StackableCoin c = 
new Penny( 
new Loonie( 
new CoinStackO)); 

System.out.printlnC" + 
c.totalCentsStackedO); 

101 
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Decorator Pattern 


Stacked Coins Example 

• We demonstrate a decorator for counting change 

- At runtime we can access older parts of the stack 

- We don’t need to make funny classes like 
LoonieAndAPenny 

- Loonies, Pennies, Dimes are all decorators for the 
CoinStack 

- We modify the output values 

• This example is mostly for learning, not real use. 
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Decorator Pattern 


StackableCoinDriver.java 


interface StackableCoin { 

public int totalCentsStacked(); 

} 

// This is the concrete component 

class CoinStack implements StackableCoin { 

public int totalCentsStacked() { return 0; 

} 

} 

// Note the lack of an Abstract Decorator 
// The decorators follow 
class Loonie implements StackableCoin { 
StackableCoin stack; 

Loonie(StackableCoin stack) { 
this. stack = stack; 


} 


} 

public int totalCentsStacked() { return 100 

+ stack.totalCentsStacked(); } 
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Decorator Pattern 


class Dime implements StackableCoin { 
StackableCoin stack; 

Dime(StackableCoin stack) { 
this. stack = stack; 

} 

public int totalCentsStacked( ) { return 10 

+ stack.totalCentsStacked(); } 

} 

class Penny implements StackableCoin { 
StackableCoin stack; 

Penny(StackableCoin stack) { 
this. stack = stack; 

} 

public int totalCentsStacked() { return 1 + 

stack.totalCentsStacked(); } 

} 


public class StackableCoinDriver { 
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Decorator Pattern 


public static void main(String args[]){ 

StackableCoin empty = new CoinStack (); 
System.out.printIn("" + empty. 

totalCentsStacked() ); 

StackableCoin first = new Loonie( empty 

); 

System, out. println (" 11 + first. 

totalCentsStacked() ); 

StackableCoin second = new Penny( first 

); 

System, out.println (" 11 + second. 

totalCentsStacked() ); 

// But I can still reference first 
System.out.println("" + first. 
totalCentsStacked() ); 

} 

} 
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Decorator Pattern 


Decorator Operation 
Method 

• Here’s a template for the operation method in the 
decorators 
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Decorator Pattern 


OperationExample.java 

void operation() { 

// put code before the operation here 


// Call the wrapped component 
component.operation(); 

// put code that follows the operation 


} 


here 
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Decorator Pattern 


Decorator Debugging 
Example 

• Maybe you want to add runtime debugging 
functionality? 

• Large systems tend to produce log messages for 
status and debugging 

- Maybe you don’t want to couple your class with the 
logger, a logging decorator would make sense. 
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Decorator Pattern 


DebugExample.java 

void operation() { 

System.err.printIn("Calling^operation^on 
u component: u " + component.toString 
0 ) ; 

component.operation(); 

System.err.printin("Returned^from^ 

calling^operation^on^component:+ 
component.toString () ) ; 

Logger.log("Successfully^called^ 

operation^from^LoggingDecorator”); 

} 
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Decorator Pattern 


debuglog.txt 

1299649240: Successfully called 
from LoggingDecorator 
1299650004: Successfully called 
from LoggingDecorator 
1299650407: Uncaught Exception 
1299651121: Successfully called 
from LoggingDecorator 
1299651852: Successfully called 
from LoggingDecorator 


operation 


operation 


operation 


operation 
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Decorator Pattern 


Where will you see this 
pattern? 

• User Interfaces 

• Filters and Input/Output chains 

• Dataflow 

- Audio (PD, CSound, Max, Reaktor) 

- Text (UNIX) 

• Indirection 

• Functional Programming 
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Decorator Pattern 


Decorator Fact Sheet 


• Structural 

• Intent: attach responsibility dynamically 

• Also Known as: Wrapper 

• Applicability: add or remove responsibilities without 
subclassing 

• Participants: Component, ConcreteComponent, 
Decorator, ConcreteDecorator 

• Uses: I/O Streams, Widgets, Buffers 

• Related patterns: Adapter, Composite, Strategy 
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Decorator Pattern 


Conclusions 


• Decorator pattern is used to decorate an object at 
runtime with extra responsibilities provided by the 
decorators. 

• Decorator patterns work by wrapping parent calls with 
code that operate before and after the parent call. 
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